<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>产品详情</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script type="text/javascript">
 $.ajax(
     url

 )
        $(function () {
            var gid = $('#gid2').val();
            var myli = $('.myli');
            $.ajax({
                //请求的路径
                url: 'GoodsController/findGoodsCanshu.action?id=' + id,
                //异步请求
                async: true,
                //服务器返回的数据类型
                dataType: 'text',
                contentType: 'application/json;charset=UTF-8',
                success: function (msg) {
                    //alert(msg);
                    var t = JSON.parse(msg);
                    for (var i = 0; i < t.length; i++) {
                        var t2 = t[i];
                        var t3 = JSON.stringify(t2);
                        var t4 = eval("(" + t3 + ")");
                        $.each(t4, function (j, v) {
                            //alert(j)
                            myli.append("<li>" + j + "：" + v + "</li>");
                        })
                    }
                },
                error: function () {
                    alert("你出错了！")
                }
            })
        })

    </script>
</head>
<body class="index">
<div class="top_ad">
    <div class="w1200"><a href="#" id="close"></a></div>
</div>

<div class="top">
    <div class="w1200">
        <div class="left">
            ${loginUser.nickname}您好，欢迎光临飞飞商城！
            <c:choose>
            <c:when test="${loginUser.nickname!=null}">
                <a href="/login">[退出]</a>
            </c:when>
            <c:otherwise>
            <a href="login.jsp">[登录]</a></div>
        </c:otherwise>
        </c:choose>
    </div>
    <div class="right">
        <a href="#">我的会员中心</a>|
        <a href="#">收藏夹</a>|
        <a href="#">服务中心</a>|
        <a href="#">在线客服</a>|
        <a href="/OrderController/findUserOrder">购物车</a>
    </div>
    <div class="clear"></div>
</div>
</div>

<div class="head">
    <div class="w1200">
        <div class="logo"><a href="#"></a></div>
        <div class="search">
            <form action="#" class="form">
                <input type="text" value="输入商品关键字" name="keyword" class="txt" onfocus="if(value=='输入商品关键字') {value=''}"
                       onblur="if(value=='') {value='输入商品关键字'}"/>
                <input type="submit" value="搜索" class="sub"/>
            </form>
            <p><a href="#">iphone6s</a>|<a href="#">面膜</a>|<a href="#">婚庆床品</a>|<a href="#">运动鞋</a>|<a
                    href="#">眼霜</a>|<a href="#">月饼</a>|<a href="#">智能手机</a>|<a href="#">连衣裙</a></p>
        </div>
        <div class="s_r">
            <dl>
                <dt><p><a href="/OrderController/findUserOrder">购物车</a></p></dt>
                <dd>客服电话：<b>400-0000-000</b></dd>
            </dl>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="menu">
    <div class="w1200">
        <div class="item" id="nav"><a href="#" class="nav">全部商品分类</a>
            <div class="nav_son">
                <ul>
                    <li class="li01"><a href="#">功能产品</a></li>
                    <li class="li02"><a href="#">服装箱包</a></li>
                    <li class="li03"><a href="#">美妆护肤</a></li>
                    <li class="li04"><a href="#">珠宝饰品</a></li>
                    <li class="li05"><a href="#">数码家电</a></li>
                    <li class="li06"><a href="#">食品茶酒</a></li>
                    <li class="li07"><a href="#">运动体育</a></li>
                    <li class="li08"><a href="#">家居家纺</a></li>
                    <li class="li09"><a href="#">生活服务</a></li>
                    <li class="li10"><a href="#">其他</a></li>
                </ul>
            </div>
        </div>
        <div class="item"><a href="/GoodsController/GetAll" class="home">商城首页</a></div>

    </div>
</div>


<div class="w1200 product">
    <div class="position"><a href="#">首页</a> ></div>

    <link rel="stylesheet" href="css/detail.css" type="text/css"/>
    <script src="js/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="js/jquery.jqzoom.js" type="text/javascript"></script>
    <script src="js/use_jqzoom.js" type="text/javascript"></script>

    <script src="js/jquery.livequery.js" type="text/javascript"></script>
    <script src="js/switchImg.js" type="text/javascript"></script>

    <!--one-->
    <div class="one">
        <div class="left">
            <!--放大镜-->
            <div class="pro_detail">
                <div class="pro_detail_left">
                    <input type="hidden" id="gid2" value="${infoGoods.id}">
                    <div class="jqzoom">
                        <img src="http://quvrfr98t.hd-bkt.clouddn.com/${infoGoods.imageUrl}" class="fs" alt="" jqimg="http://quvrfr98t.hd-bkt.clouddn.com/${infoGoods.imageUrl}"
                             id="bigImg"/>
                    </div>
                    <span>
                         <ul class="imgList">
                            <c:forEach items="${byGidGoodimagelist}" var="gl">
                                <li><img src="images2/${gl.imageUrl}" alt=""/></li>
                            </c:forEach>
                         </ul>
                     </span>
                </div>
            </div>
            <!--放大镜-->
        </div>
        <div class="right">
            <div class="title">${infoGoods.title}</div>
            <div class="price">
                <table width="100%" height="61" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="8%">原价：</td>
                        <td width="41%"><b style="text-decoration:line-through;font-weight:normal;font-size:15px">${infoGoods.originPrice}</b></td>
                    </tr>
                    <tr>
                        <td width="8%">现价：</td>
                        <td width="41%"><b>${infoGoods.currentPrice}</b></td>
                    </tr>
                </table>
            </div>
            <div class="number">
                <small>数量：</small><input id="inum" type="text" class="num" value="1"/><span class="jian"></span><span
                    class="jia"></span>
                <div class="ku"><p>件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;库存694件</p></div>
                <div class="clear"></div>
            </div>
            <div class="sale"><small>销量：</small><span class="on">21212</span>
                <div class="clear"></div>
            </div>
            <div class="sub">

                <a class="btn02" onclick="fun1()"></a>
            </div>
        </div>
        <div class="clear"></div>
    </div>

    <div class="share w1200">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="13%">收藏商品 已有<b>0</b>人气</td>
                <td width="87%">
                    <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#"
                                                                                                      class="bds_qzone"
                                                                                                      data-cmd="qzone"></a><a
                            href="#" class="bds_tsina" data-cmd="tsina"></a><a href="#" class="bds_tqq"
                                                                               data-cmd="tqq"></a><a href="#"
                                                                                                     class="bds_renren"
                                                                                                     data-cmd="renren"></a><a
                            href="#" class="bds_weixin" data-cmd="weixin"></a></div>
                    <script>window._bd_share_config = {
                        "common": {
                            "bdSnsKey": {},
                            "bdText": "",
                            "bdMini": "2",
                            "bdPic": "",
                            "bdStyle": "0",
                            "bdSize": "16"
                        },
                        "share": {},
                        "image": {
                            "viewList": ["qzone", "tsina", "tqq", "renren", "weixin"],
                            "viewText": "分享到：",
                            "viewSize": "16"
                        },
                        "selectShare": {
                            "bdContainerClass": null,
                            "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"]
                        }
                    };
                    with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
                    <span>分享到:</span>
                </td>
            </tr>
        </table>
    </div>

    <!--two-->
    <div class="two">
        <div class="left">
            <dl>
                <dt>相关产品</dt>
                <dd>
                    <c:forEach items="${goodsAllGoods}" var="g">
                        <c:if test="${g.id=='1'}">
                            <div class="item">
                                <ul>
                                    <li><img src="images2/${g.imageUrl}" width="160" height="160"/></li>
                                    <li class="title"><a href="#">${g.gname}</a></li>
                                    <li class="price">${g.money}</li>
                                </ul>
                            </div>
                        </c:if>
                    </c:forEach>
                </dd>
            </dl>
        </div>
        <div class="right">
            <dl>
                <dt><a class="cur" href="#a01">商品详情</a>
                    <a href="#a02">规格参数</a>
                    <a href="#a03">累计评价<font>（2654）</font></a>
                    <a href="#a04">售后保障</a>
                    <a href="#a05">易易城消费返现规则</a>
                </dt>
                <dd>
                    <a name="a01"></a>
                    <ul class="myli" style="height:120px">
                        <div class="clear"></div>
                    </ul>
                </dd>
                <div class="pro-info">
                    <%--详图--%>
                    <img src="images2/hw-Mate40-a.jpg"/>
                    <img src="images2/hw-Mate40-b.jpg"/>
                    <img src="images2/hw-Mate40-c.jpg"/>
                </div>
                <dd class="dd02">
                    <div class="dd02_t">累计评价</div>
                    <!--评价-->
                    <div class="rate-header rate-header-tags">
                        <div class="rate-score">
                            <h4>与描述相符</h4>
                            <strong>4.8</strong>
                            <p><span class="s48"></span></p>
                        </div>
                        <div class="rate-tag-box">
                            <div class="rate-tag-label">
                                <span>大家都写到</span>
                            </div>
                            <div class="rate-tag-list" style="height: 70px;">
                                <div class="rate-tag-inner">
                                    <span class="tag-posi">很舒服(189)</span>
                                    <span class="tag-posi">整体不错(160)</span>
                                    <span class="tag-posi">面料好(92)</span>
                                    <span class="tag-posi">尺码很准(52)</span>
                                    <span class="tag-posi">版式好(45)</span>
                                    <span class="tag-posi">颜色很好(36)</span>
                                    <span class="tag-posi">颜色一般(20)</span>
                                    <span class="tag-posi">尺码很准(52)</span>
                                    <span class="tag-posi">版式好(45)</span>
                                    <span class="tag-posi">颜色很好(36)</span>
                                    <span class="tag-posi">颜色一般(20)</span>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </dd>
                <dd class="dd03">
                    <div class="pj_list">
                        <div class="pj_one">
                            <dl>
                                <dt><a class="cur" href="#a01">全部<font>（2654）</font></a><a
                                        href="#a02">好评<font>（2154）</font></a><a href="#a03">中评<font>（2654）</font></a><a
                                        href="#a04">差评<font>（16）</font></a><a href="#a05">有图评价<font>（919）</font></a>
                                </dt>
                            </dl>
                            <div class="clear"></div>
                        </div>
                        <div class="pj_two">
                            <div class="pj_item">
                                <div class="two1">初次评价：<br/>06.16</div>
                                <div class="two2"><p>已经收到了，包装的很精美，品相非常不错, 比商城买的实惠，发货速度很给力</p>
                                    <p><img src="images/ico36.jpg"/><img src="images/ico36.jpg"/></p>
                                </div>
                                <div class="two3">s******88(匿名)<br/><img src="images/ico37.jpg"/><img
                                        src="images/ico37.jpg"/><img src="images/ico37.jpg"/></div>
                                <div class="clear"></div>
                            </div>
                            <!--page-->
                            <div class="page"><a href="#">上一页</a><a href="#" class="on">1</a><a href="#">2</a><a
                                    href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a
                                    href="#">7</a><a href="#">...</a><a href="#">下一页</a></div>
                            <!--page2-->
                        </div>
                    </div>
                </dd>
            </dl>

            <div class="shenmin">
                <p><b>安全提示：</b>交易中请勿使用阿里旺旺以外的聊天工具沟通，不要接收可疑文件和不要点击不明来源的链接，支付前核实好域名和支付详情。
                    淘宝不会以订单有问题，让您提供任何银行卡、密码、手机验证码！遇此情况请终止通话或举报到淘宝网 常见骗术<br/>推荐安全软件： 阿里钱盾阿里钱盾 UC浏览器UC浏览器 腾讯电脑管家腾讯电脑管家
                    360网盾360网盾 安全软件中心</p>

                <p><b>内容申明：</b>淘宝为第三方交易平台及互联网信息服务提供者，淘宝（含网站、客户端等）所展示的商品/服务的标题、价格、详情等信息内容系由店铺经营者发布，其真实性、准确性和合法性均由店铺经营者负责。淘宝提醒用户购买商品/服务前注意谨慎核实。如用户对商品/服务的标题、价格、详情等任何信息有任何疑问的，请在购买前通过阿里旺旺与店铺经营者沟通确认；淘宝存在海量店铺，如用户发现店铺内有任何违法/侵权信息，请立即向淘宝举报并提供有效线索。
                </p>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<!--footer-->
<div class="footer">
    <div class="f_bz">
        <div class="w1200">
            <dl class="dl01">
                <dt>正品保证</dt>
                <dd>正品护航 购物无忧</dd>
            </dl>
            <dl class="dl02">
                <dt>你消费 我买单</dt>
                <dd>返现购物商城</dd>
            </dl>
            <dl class="dl03">
                <dt>品类丰富</dt>
                <dd>品类齐全 轻松购物</dd>
            </dl>
            <dl class="dl04">
                <dt>特色服务体验</dt>
                <dd>为您呈现不一样的服务</dd>
            </dl>
            <div class="clear"></div>
        </div>
    </div>
    <div class="f_nav">
        <div class="w1200">
            <dl>
                <dt>新手指南</dt>
                <dd>
                    <a href="#">注册新用户</a>
                    <a href="#">商品订购流程</a>
                    <a href="#">会员注册协议</a>
                </dd>
            </dl>
            <dl>
                <dt>付款方式</dt>
                <dd>
                    <a href="#">支付宝支付</a>
                    <a href="#">网上银行支付</a>
                    <a href="#">货到付款</a>
                </dd>
            </dl>
            <dl>
                <dt>常见问题</dt>
                <dd>
                    <a href="#">订单状态</a>
                    <a href="#">发票说明</a>
                </dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd>
                    <a href="#">退换货政策</a>
                    <a href="#">退换货流程</a>
                    <a href="#">退款说明</a>
                    <a href="#">退换货申请</a>
                </dd>
            </dl>
            <dl>
                <dt>客服中心</dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">联系客服</a>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div class="ewm"><img src="images/home/ico35.png"/></div>
            <div class="ewm"><img src="images/home/ico38.png"/></div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="w1200">
        <div class="bottom">
            <a href="#">关于我们</a>|<a href="#">帮助中心</a>|<a href="#">法律声明</a>|<a href="#">用户协议</a>|<a href="#">联系我们</a>|<a
                href="#">人才招聘</a>|<a href="#">站点地图</a>

            <p>网络文化经营许可证：粤网文[2015]0295-065号<br/>© 2015 深圳易易城科技网络有限公司. 粤ICP备15042543号</p>
            <p class="p02"><img src="images/home/ico25.jpg"/><img src="images/home/ico26.jpg"/><img
                    src="images/home/ico27.jpg"/><img src="images/home/ico36.jpg"/><img src="images/home/ico37.jpg"/>
            </p>
        </div>
    </div>
</div>

<script type="text/javascript">
    var citySeclect = $('#city');
    var goodnum=$('#inum');
    function fun1(){
        var a=goodnum.val();
        var id=${sessionScope.infoGoods.id};
        var url="/OrderController/findOrder?id="+id+"&num="+a;
        window.location.href=url;
    }
    function changepro(p){
        alert(p.value);
        $.ajax({
            //请求的路径
            url: '/SanJiLianDongController/getCity?id='+p.value,
            //异步请求
            async: true,
            //服务器返回的数据类型
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (msg) {
                for (var i = 0; i < msg.length; i++) {
                    var t2 = msg[i];

                        citySeclect.append("<option value='" + t2.id + "'>" + t2.name+ "</option>");

                }
            },
            error: function () {
                alert("你出错了！")
            }
        });
    }
    $(function () {
        var imgWid = 0;
        var imgHei = 0; //变量初始化
        var big = 6.2;//放大倍数
        $(".pj_item .two2 p img").hover(function () {
            $(this).stop(true, true);
            var imgWid2 = 0;
            var imgHei2 = 0;//局部变量
            imgWid = $(this).width();
            imgHei = $(this).height();
            imgWid2 = imgWid * big;
            imgHei2 = imgHei * big;
            $(this).css({"z-index": 2, "position": "relative"});
            $(this).animate({
                "width": imgWid2,
                "height": imgHei2,
                "margin-left": -imgWid2 / 3,
                "margin-top": -imgWid2 / 3
            });
        }, function () {
            $(this).stop().animate({
                "width": imgWid,
                "height": imgHei,
                "margin-left": 0,
                "margin-top": 0,
                "z-index": 1
            });
        });
    })
</script>
</body>
</html>

